<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<script src="js/html5shiv.min.js"></script>
	<script src="js/flexible.debug.js"></script>
	<script src="js/flexible_css.debug.js"></script>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/swiper.jquery.min.js"></script>
</head>
<body>
	<header class="index_header">
		<figure class="index_scan"><img src="img/saomiao@2x.png"></figure>
		<figure class="index_search"><a href="search.html"><input type="search" value="搜索"></a></figure>
		<figure class="index_car"><a href="shop_car.html"><img src="img/gouwuche@2x.png"></a></figure>
	</header>
	<section class="index_play swiper-container">
		<div class="swiper-wrapper">
	        <div class="swiper-slide"><img src="img/index_play.png"></div>
	        <div class="swiper-slide"><img src="img/section2.png"></div>
	        <div class="swiper-slide"><img src="img/section3.png"></div>
	    </div>
	</section>
	<section class="index_module">
		<dl>
			<dt><img src="img/shouye-rukou1@2x.png"></dt>
			<dd>胖虎自营</dd>
		</dl>
		<dl>
			<dt><a href="choose.html"><img src="img/shouye-rukou2@2x.png"></a></dt>
			<dd><a href="choose.html">达人社区</a></dd>
		</dl>
		<dl>
			<dt><a href="Appraisal.html"><img src="img/shouye-rukou3@2x.png"></a></dt>
			<dd><a href="Appraisal.html">鉴定评估</a></dd>
		</dl>
		<dl>
			<dt><a href="yanghuweixiu.html"><img src="img/shouye-rukou4@2x.png"></a></dt>
			<dd><a href="yanghuweixiu.html">养护维修</a></dd>
		</dl>
		<dl>
			<dt><a href="store.html"><img src="img/shouye-rukou5@2x.png"></a></dt>
			<dd><a href="store.html">胖虎门店</a></dd>
		</dl>
		<dl>
			<dt><a href="recommend.html"><img src="img/shouye-rukou6@2x.png"></a></dt>
			<dd><a href="recommend.html">好店收藏</a></dd>
		</dl>
		<dl>
			<dt><a href="Call center.html"><img src="img/shouye-rukou7@2x.png"></a></dt>
			<dd><a href="Call center.html">领券中心</a></dd>
		</dl>
		<dl>
			<dt><a href="panghu-guanjia.html"><img src="img/shouye-rukou8@2x.png"></a></dt>
			<dd><a href="panghu-guanjia.html">胖虎管家</a></dd>
		</dl>
	</section>
	<section class="index_divide"></section>
	<section class="index_sales">
		<h2>
			<figure class="sales_title">胖虎特卖</figure>
			<figure class="sales_arrow"><a href="panghutemai.html"><img src="img/dianjirukou@2x.png"></a></figure>
		</h2>
		<article>
			<dl>
				<dt><img src="img/index_sales1.png"></dt>
				<dd>
					<p>海琴军旗...</p>
					<p>￥9678</p>
					<p>￥8799</p>
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sales2.png"></dt>
				<dd>
					<p>天梭T-CL...</p>
					<p>￥1978</p>
					<p>￥1799</p>
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sales3.png"></dt>
				<dd>
					<p>卡地亚DR...</p>
					<p>￥30248</p>
					<p>￥27499</p>
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sales4.png"></dt>
				<dd>
					<p>GUCCI...</p>
					<p>￥1746</p>
					<p>￥1588</p>
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sales5.png"></dt>
				<dd>
					<p>万宝龙时...</p>
					<p>￥14518</p>
					<p>￥13199</p>
				</dd>
			</dl>
		</article>
	</section>
	<section class="index_divide"></section>
	<section class="index_sunday">
		<h2>
			<span>限时抢·周日十点专场</span>
			<span>距开始</span>
			<time>
				<b class="sunday_day"></b>天
				<b class="sunday_hour"></b>:
				<b class="sunday_minute"></b>:
				<b class="sunday_second"></b>
			</time>
			<figure class="sales_arrow"><img src="img/dianjirukou@2x.png"></figure>
		</h2>
		<article>
			<dl>
				<dt><a href="dashoubiao.html"><img src="img/index_sunday1.png"></a></dt>
				<dd>
					￥3500
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sunday2.png"></dt>
				<dd>
					￥33320
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sunday3.png"></dt>
				<dd>
					￥3299
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sunday4.png"></dt>
				<dd>
					￥1588
				</dd>
			</dl>
			<dl>
				<dt><img src="img/index_sunday5.png"></dt>
				<dd>
					￥7999
				</dd>
			</dl>
		</article>
	</section>
	<section class="index_divide"></section>
	<section class="index_show">
		<figure><img src="img/section1.png"></figure>
		<figure><img src="img/section2.png"></figure>
		<figure><img src="img/section3.png"></figure>
	</section>
	<nav class="index_nav">
		<ul>
			<li class="index_on">推荐</li>
			<li>最新</li>
			<li>包袋</li>
			<li>腕表</li>
		</ul>
		<section class="index_goods" id="index_vue">
			<dl v-for='info in infosObj'>
				<dt><a href=""><img v-bind:src="info.imgUrl"></a></dt>
				<dd>
					<p>{{info.content}}</p>
					<p>{{info.price}}	<span class="index_heart"><img v-bind:src="info.heartUrl"></span></p>
				</dd>
			</dl>
		</section>
	</nav>
	<section class="index_showfooter"></section>
	<footer class="index_footer">
		<dl>
			<a href="index.html">
				<dt>
				<img src="img/dibu-icon1-xuanzhong@2x.png">
				</dt>
				<dd class="footer_on">首页</dd>
			</a>
		</dl>
		<dl>
			<a href="buy.html">
				<dt>
				<img src="img/dibu-icon2-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>买</dd>
			</a>
		</dl>
		<dl>
			<a href="fabu.html">
				<img src="img/dibu-icon3@2x.png" alt="">
			</a>
		</dl>
		<dl>
			<a href="msg.html">
				<dt>
				<img src="img/dibu-icon4-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>消息</dd>
			</a>
		</dl>
		<dl>
			<a href="my.html">
				<dt>
				<img src="img/dibu-icon5-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>我的</dd>
			</a>
		</dl>
	</footer>





	<script src="js/vue.js"></script>
	<script>        
		$(function(){
			var vm = new Vue({
		  		el:'#index_vue',
		  		data:{
		  			infosObj:[
		   				{imgUrl:'img/goods1.png',content:'Dior五格戴妃包刺绣盾牌限量版，92新，边角和金',price:'￥11800',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods2.png',content:'【全新DW女款尼龙】36mm直径，粉白蓝色表',price:'￥36500',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods1.png',content:'Dior五格戴妃包刺绣盾牌限量版，92新，边角和金',price:'￥11800',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods2.png',content:'【全新DW女款尼龙】36mm直径，粉白蓝色表',price:'￥36500',heartUrl:'img/weixihuan@2x.png'}
	   				]
		  		}
		  	})
			var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal',
		    loop: true,
		    autoplay: 1000,
		    autoplayDisableOnInteraction : false
		    })   
		    $('li').click(function(){
		    	$(this).addClass('index_on')
		    			.siblings().removeClass('index_on');
		    })  
		    $('.index_heart').click(function(){
		    	if($(this).html() == '<img src="img/weixihuan@2x.png">'){
		    		$(this).html('<img src="img/weixihuan_on@2x.png">');
		    	}else{
		    		$(this).html('<img src="img/weixihuan@2x.png">');
		    	}
		    })
		    var targetDate = new Date('2017/5/7');
		    var secondBetween = (targetDate - new Date())/1000 + 36000;
		    var days = Math.floor(secondBetween/60/60/24);
		    var hours =  Math.floor(secondBetween/60/60) - days*24;
		    var minutes =  Math.floor(secondBetween/60) - hours*60 - days*60*24;
		    var seconds = parseInt(secondBetween - minutes*60 - hours*60*60 - days*60*60*24);
		    var set;
		    seconds = seconds<10?'0'+parseInt(seconds):seconds;
		    minutes = minutes<10?'0'+parseInt(minutes):minutes;
		    hours = hours<10?'0'+parseInt(hours):hours;
		    days = days<10?'0'+parseInt(days):days;
		    $('.sunday_day').html(days);
		    $('.sunday_hour').html(hours);
		    $('.sunday_minute').html(minutes);
		    $('.sunday_second').html(seconds);
			set = setInterval(function(){
				seconds--;
				seconds = seconds<10?'0'+parseInt(seconds):seconds;
			    minutes = minutes<10?'0'+parseInt(minutes):minutes;
			    hours = hours<10?'0'+parseInt(hours):hours;
			    days = days<10?'0'+parseInt(days):days;
			    $('.sunday_day').html(days);
			    $('.sunday_hour').html(hours);
			    $('.sunday_minute').html(minutes);
			    $('.sunday_second').html(seconds);
				if(seconds == 0 && minutes>0){
					minutes--;
					seconds = 60;
				}
				if(seconds == 0 && minutes == 0 && hours>0){
					hours--;
					minutes = 60;
				}
				if(seconds == 0 && minutes == 0 && hours == 0 && days>0){
					days--;
					hours = 24;
				}
				if(seconds == '00' && minutes == '00' && hours == '00' && days == '00'){
					clearInterval(set);
				}
			},1000)  
		})
	  	
  	</script>
</body>
</html>